<template>
  <el-popover placement="bottom" width="210">
    <template #reference>
      <span style="cursor: pointer" class="custom-cell">{{ principalNames }}</span>
    </template>
    <div class="principal-info">
      <div class="principal-info__item" v-for="userItem in rowData.principal ?? []" :key="userItem.userId">
        <span class="principal-info__item__label">{{ userItem.roleName }}</span>
        <span>：</span>
        <span class="principal-info__item__value">{{ userItem.username }}</span>
      </div>
    </div>
  </el-popover>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  rowData: {
    type: Object,
    default: () => ({})
  }
});

const principalNames = computed(() => {
  const data = props.rowData;
  const sliceData = ((data.principal?.length > 3 ? data.principal.slice(0, 3) : data.principal) ?? []).map(item => {
    return item.username;
  });
  return `${sliceData.join("/")}${data.principal?.length > 3 ? "/..." : ""}`;
});
</script>

<style scoped lang="scss">
@import "principalName";
</style>
